import React from "react";
import { Avatar, Button, Dropdown, Layout, Menu, theme } from 'antd';
import { MenuUnfoldOutlined,MenuFoldOutlined } from '@ant-design/icons';
import './header.css'
import{ useDispatch} from 'react-redux'
import { collapseMenu} from '../../store/reducers/tab'
const { Header, Sider, Content } = Layout;
const CommonHeader = ({ collapsed }) => {

  const logout = () => {

  }

  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer">
          个人中心
        </a>
      ),
    },
    {
      key: '1',
      label: (
        <a onClick={() => logout} target="_blank" rel="noopener noreferrer" >
          退出
        </a>
      ),
    }
  ]
  const dispathch=useDispatch();
  const setCollapsed = () => {
  //  console.log(collapsed)
    dispathch(collapseMenu());
  }

  return (
    <Header className="header-comntainer" >
      <Button
        type="text"
        className="btnicon" 
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        style={{
          fontSize: '16px',
          width: 64,
          // height: 64,
          background: "#fff",
          height: '30px'
        }}
        onClick={()=>setCollapsed()}
      />
      <Dropdown menu={{ items }}>
        <Avatar size={36} src={require('../../assets/images/user.jpg')} />
      </Dropdown>
    </Header>
  )
}
export default CommonHeader